<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit">
	<title>Form Designer</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.7/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.6.7/layui.js"></script>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="font/iconfont.css">
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet">	 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	
	<script src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>

<div class="fc-f-container">
	<!-- left begin -->
	<div class="fc-f-left-side">
		<div class="fc-f-logo-wrap"><i class="layui-icon layui-icon-template-1"></i>Form Designer</div>
		<div class="aside">
			<div class="fc-components">
				<h4>常用组件</h4>
				<ul class="fc-components-list">
					<li data-type="text" class="draggable"><i class="iconfont">&#xe707;</i>单行文本</li>
					<li data-type="textarea" class="draggable"><i class="iconfont">&#xe713;</i>多行文本</li>
					<li data-type="radio" class="draggable"><i class="iconfont">&#xe6d6;</i>单选</li>
					<li data-type="checkbox" class="draggable"><i class="iconfont">&#xe8be;</i>多选</li>
					<li data-type="select" class="draggable"><i class="iconfont">&#xe6d1;</i>下拉选择</li>
					<li data-type="InputNumber" class="draggable"><i class="iconfont">&#xe640;</i>计数器</li>
					<li data-type="switch" class="draggable"><i class="iconfont">&#xe65e;</i>开关</li>
					<li data-type="line" class="draggable"><i class="iconfont">&#xe613;</i>分割线</li>
					<li data-type="progress" class="draggable"><i class="iconfont">&#xe604;</i>进度条</li>
					<li data-type="title" class="draggable"><i class="iconfont">&#xe63d;</i>标题</li>
					<li data-type="rate" class="draggable"><i class="iconfont">&#xe63e;</i>评分</li>
					<li data-type="link" class="draggable"><i class="iconfont">&#xe63f;</i>超链接</li>
					<li data-type="cascader" class="draggable"><i class="iconfont">&#xe622;</i>级联选择</li>
					<li data-type="slider" class="draggable"><i class="iconfont">&#xe684;</i>滑块</li>
					<li data-type="dateRange" class="draggable"><i class="iconfont">&#xe6a5;</i>日期范围</li>
					<li data-type="date" class="draggable"><i class="iconfont">&#xe6d3;</i>日期</li>
					<li data-type="time" class="draggable"><i class="iconfont">&#xe605;</i>时间</li>
					<li data-type="editor" class="draggable"><i class="iconfont">&#xe625;</i>编辑器</li>
					<li data-type="uploadImg" class="draggable"><i class="iconfont">&#xe629;</i>图片上传</li>
					<li data-type="uploadFile" class="draggable"><i class="iconfont">&#xe602;</i>附件</li>
					<li data-type="subform" class="draggable"><i class="iconfont">&#xe649;</i>子表单</li>
				</ul>
				<h4>布局组件</h4>
				<ul class="fc-components-list">
					<li data-type="gridLayout" class="draggable"><i class="iconfont">&#xe60c;</i>栅格布局</li>
					<li data-type="formLayout" class="draggable"><i class="iconfont">&#xe663;</i>表单布局</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- left end -->

	<!-- center begin -->
	<div class="fc-f-content">
		<div class="fc-f-action-wrap">
			<button class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius layui-border-blue" lay-active="json"><i class="layui-icon layui-icon-slider"></i>查看json</button>
			<button class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius layui-border-blue" lay-active="clear"><i class="layui-icon layui-icon-delete"></i>清空</button>
			<button class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius layui-border-blue" lay-active="view"><i class="iconfont" style="font-size:20px;vertical-align:bottom;margin-right:3px;">&#xe600;</i>预览</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" lay-active="save"><i class="layui-icon layui-icon-delete"></i>保存</button>
		</div>
		<div class="fc-f-form-wrap">
			<div class="content">
				<!-- 组件放置区域 -->
				<div class="layui-form droppable form-designer" id="form-designer"></div>
				<div class="empty"><p style="font-size:22px;font-weight:300;">从左侧组件中点选或拖入添加</p></div>
			</div>
		</div>
	</div>
	<!-- center end -->

	<!-- right begin -->
	<div class="fc-f-right-side">
		<div class="layui-tab layui-tab-brief" lay-filter="right-side-tab">
		<ul class="layui-tab-title">
			<li lay-id="1">组件属性</li>
			<li lay-id="2" class="layui-this">表单属性</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item">
				<form class="layui-form" id="components-setting-form" lay-filter="components-setting-form">
					<!-- 组件属性设置区域 -->
				</form>
				<div class="empty"><p>请选择自定义组件</p></div>
			</div>
			<!-- 表单属性 begin -->
			<div class="layui-tab-item layui-show">
				<div class="layui-form" lay-filter="formset">
					<div class="layui-form-item">
						<label class="layui-form-label">表单尺寸</label>
						<div class="layui-input-block">
							<div class="radiogroup" filter="formsize">
								<label class="is-active"><input type="radio" name="size" value="medium" checked lay-ignore><span>medium</span></label>
								<label><input type="radio" name="size" value="small" lay-ignore><span>small</span></label>
								<label><input type="radio" name="size" value="mini" lay-ignore><span>mini</span></label>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">标签对齐</label>
						<div class="layui-input-block">
							<div class="radiogroup" filter="formLabelPosition">
								<label><input type="radio" name="alignment" value="left" checked lay-ignore><span>左对齐<span></label>
								<label class="is-active"><input type="radio" name="alignment" value="right" lay-ignore><span>右对齐</span></label>
								<label><input type="radio" name="alignment" value="top" lay-ignore><span>顶部对齐</span></label>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">标签宽度</label>
						<div class="layui-input-block">
							<div class="layui-input-inline" style="width:132px;">
								<input class="fc-input-number" value="80" step="5" max="300" min="50" change="getLabelWidth" fc-filter="labelWidth" />
							</div>
							<div class="layui-form-mid">px</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">方框风格</label>
						<div class="layui-input-block">
							<input type="checkbox" name="pane" lay-skin="switch" lay-filter="pane">
						</div>
					</div>
				</div>
			</div>
			<!-- 表单属性 end -->
		</div>
	</div>
	<!-- right end -->
</div>

<!-- 抽屉 预览布局 begin-->
<div class="fc-drawer" id="layout-view" style="">
	<div class="fc-drawer-panel">
		<div class="fc-drawer-body view-wrap">
		</div>
	</div>
</div>
<!-- 抽屉 预览布局 end-->

<div id="viewpre" style="display: none;">
	<pre class="layui-code"  lay-about="" lay-title="view"></pre>
</div>

</body>

<script src="js/common.js"></script>
</html>